<template>
	<view>
		<!-- 未启动时显示页面按钮（操作前往操作页面） -->
		<view v-if="programState.status === '-1'" style="margin-top: 50%;">
			<view class="padding-xs flex align-center">
				<view class="flex-sub text-center">
					<view class="text-xsl padding" @tap="switchEditPage">
						<text class="cuIcon-settings text-green"></text>
					</view>
					<view class="padding" style="font-size: 14px">点击上方按钮前往操作页面</view>
				</view>
			</view>
		</view>
		
		<!-- 显示数据页面 -->
		<view v-else>
			<!-- 展示页 -->
			<view v-if="programState.process.length > 0 && home_data.head.length > 0">
					
				<view class="cu-list grid col-3 no-border">
					<view class="cu-item" v-for="(item,index) in home_data.head" :key="index">
						<h3>{{ item.text }}</h3>
						<text>{{ item.type }}</text>
					</view>
				</view>
				
				<!-- 导航栏 -->
				<scroll-view scroll-x class="nav text-center" :class="'bg-' + basic.color">
					<view class="cu-item" :class="item === TabCur?'text-green cur':''" v-for="(item,index) in home_data.symbols" :key="index" @tap="tabSelect(item)" :data-id="index">
						{{item}}
					</view>
				</scroll-view>
								
				<view v-if="home_data.symbols.length > 0 && detailShow">
					<!-- 九宫格 -->
					<view class="cu-list grid col-3 no-border">
						<view class="cu-item" v-for="(item,index) in home_data.details.dgs" :key="index">
							<h3>{{ item.text }}</h3>
							<text>{{ item.type }}</text>
						</view>
					</view>
					
					<!-- 表格 -->
					<customTable v-if="TabCur!==null" :thList="ThList" :tdList="TdList" :tdData="longTdData" :useCusTdList="false"></customTable>
					<customTable v-if="TabCur!==null" :thList="ThList" :tdList="TdList" :tdData="shortTdData" :useCusTdList="false"></customTable>
					<customTable v-if="TabCur!==null" :thList="speedThList" :tdList="speedTdList" :tdData="speedTdData" :useCusTdList="false"></customTable>
				</view>
								
			</view>
			
			<!-- 等待页 -->
			<view v-else class="padding-xs flex align-center" style="margin-top: 50%;">
				<view class="flex-sub text-center">
					<view class="text-xsl padding" @tap="reloadRobotStatus">
						<text class="cuIcon-icloading text-green"></text>
					</view>
					<view class="padding" style="font-size: 14px">约10~15分钟</view>
					<view style="font-size: 14px">数据正在构建中</view>
					<view style="font-size: 14px">可点击上方刷新</view>
					<view style="font-size: 14px">往监控查看日志</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { homeDgs, symbolDetails } from '@/api/dgs/dgs.js'
	import customTable from '@/components/customTable/customTable.vue'
	export default {
		components: {
			customTable
		},
		props: {
			basic: {},
			vprogramstate: {}
		},
		data() {
			return {
				programState: {
					pan_opening: '1',	// 盘口类型  ('0', '实盘'), ('1', '模拟盘'),
					status: '-1',	// 程序状态 ('-1', '停止'), ('1', '运行中'), ('0', '平仓停止'),
					process: []	// 进程PID号
				},
				home_data: {
					head: [],	// 上部数据
					symbols: [],		// 交易对名称列表
					details: {}	// 交易对详细数据
				},
				detailShow: false,	// 详细区是否显示
				TabCur: null,
				
				ThList: ['序号','买入价','下单量','卖出价','DGS状态','天单价','地单价','所需U','订单ID'],//表头
				TdList: ['number','amount','coverPrice','state','beginPrice','endPrice','posU','orderId'], //自定义属性名
				longTdData: [],
				shortTdData: [],
				
				speedThList: ['类型','买入价','下单量','卖出价','DGS状态','所需U','价格距离','开仓','订单ID'],//表头
				speedTdList: ['pos','buyPrice','amount','coverPrice','state','posU','distance','open','orderId'], //自定义属性名
				speedTdData: []
			}
		},
		watch: {
			vprogramstate: {
				immediate: true,
				handler (val) {
					this.programState = val
					if (this.programState.status !== '-1') {
						this.getHomeData()
					}
				}
			}
		},
		methods: {
			// 点击
			tabSelect(symbol) {
				console.log('点击', symbol)
				uni.showLoading({
					title: '加载中...',
				})
				
				var _this = this
				_this.detailShow = false
				_this.longTdData = []
				_this.shortTdData = []
				_this.speedTdData = []
				
				uni.getStorage({
					key:_this.basic.exchange_domain + _this.basic.strategy_name,
					success(resVisit) {
						symbolDetails(resVisit.data.ip_address, `${_this.basic.exchange_domain}/${_this.basic.strategy_name}`, resVisit.data.access, {
							symbol: symbol
						}).then((res) => {
							console.log('获取交易对详细数据', res)
							_this.home_data.details = res.data
							
							// 格式化详细数据
							// 多仓
							var long = _this.home_data.details.db.buy_kai_long
							for (var lo in long) {
								var long_beginPrice = long[lo].beginPrice
								var long_endPrice = long[lo].endPrice
								
								if (long[lo].state === 'idle') {
									var lo_state = "空闲"
								} else {
									var lo_state = "交易中"
								}
								_this.longTdData.push({
									number: '多仓 '+long[lo].number,
									price: long[lo].price,
									amount: long[lo].amount,
									coverPrice: long[lo].coverPrice,
									state: lo_state,
									beginPrice: long_beginPrice.toFixed(2),
									endPrice: long_endPrice.toFixed(2),
									posU: long[lo].posU,
									orderId: long[lo].orderId
								})
							}
							
							// 空仓
							var short = _this.home_data.details.db.sell_kai_short
							for (var st in short) {
								var short_beginPrice = short[st].beginPrice
								var short_endPrice = short[st].endPrice
								
								if (short[st].state === 'idle') {
									var st_state = "空闲"
								} else {
									var st_state = "交易中"
								}
								_this.shortTdData.push({
									number: '空仓 '+short[st].number,
									price: short[st].price,
									amount: short[st].amount,
									coverPrice: short[st].coverPrice,
									state: st_state,
									beginPrice: short_beginPrice.toFixed(2),
									endPrice: short_endPrice.toFixed(2),
									posU: short[st].posU,
									orderId: short[st].orderId
								})
							}
							
							// 极速
							var speed = _this.home_data.details.db.speed_tracking
							for (var sd in speed) {
								var buyPrice = speed[sd].buyPrice
								var coverPrice = speed[sd].coverPrice
								if (speed[sd].pos === "s_t_buy_kai_long") {
									var ps = "极速多仓"
								} else {
									var ps = "极速空仓"
								}
								
								if (speed[sd].open) {
									var op = "禁止"
								} else {
									var op = "允许"
								}
								
								if (speed[sd].state === 'idle') {
									var sp_state = "空闲"
								} else {
									var sp_state = "交易中"
								}
								
								_this.speedTdData.push({
									pos: ps,
									buyPrice: buyPrice.toFixed(2),
									amount: speed[sd].amount,
									coverPrice: coverPrice.toFixed(2),
									state: sp_state,
									posU: speed[sd].posU,
									distance: speed[sd].distance,
									open: op,
									orderId: speed[sd].orderId,
								})
							}
							
							_this.detailShow = true
							setTimeout(function () {
								uni.hideLoading();
							}, 1000);
						})
						
					},fail(errVisit) {
						console.log('home数据获取token失败.')
						uni.showToast({ icon:'none', title: 'Token获取失败' })
						setTimeout(function () {
							uni.reLaunch({
								url: '/pages/home/home'
							});
						}, 1000)
					}
				})
				
				this.TabCur = symbol
				setTimeout(function () {
					uni.hideLoading();
				}, 1000);
			},
			// 获取home数据
			getHomeData() {
				uni.showLoading({
					title: '加载中...',
				})
				var _this = this
				uni.getStorage({
					key:_this.basic.exchange_domain + _this.basic.strategy_name,
					success(resVisit) {
						homeDgs(resVisit.data.ip_address, `${_this.basic.exchange_domain}/${_this.basic.strategy_name}`, resVisit.data.access).then((res) => {
							console.log('获取home数据', res)
							_this.home_data.head = res.data.head
							_this.home_data.symbols = res.data.symbols
							setTimeout(function () {
								uni.hideLoading();
							}, 1000);
						})
						
					},fail(errVisit) {
						console.log('home数据获取token失败.')
						uni.showToast({ icon:'none', title: 'Token获取失败' })
						setTimeout(function () {
							uni.reLaunch({
								url: '/pages/home/home'
							});
						}, 1000)
					}
				})
			},
			switchEditPage() {
				this.$emit("selectPage", {pages:1})
			},
			reloadRobotStatus() {
				uni.showLoading({
					title: '加载中...',
				})
				var _this = this
				console.log('点击刷新并调用父组件获取机器人状态')
				_this.$emit("setRobotStatus")
				setTimeout(function () {
					uni.hideLoading();
				}, 1000);
			}
		}
	}
</script>

<style>

</style>
